/*
天气接口：
请求地址：http://wthrcdn.etouch.cn/weather_mini
参数：city
 */

var app = new Vue({
    el: "#app",
    data: {
        city: "北京", //页面第一次加载的城市
        NowweatherList: [],
        hours: [],
        tips: [],
        isActive: true,
        isActivei: true,
        arraypic: [
            " ../pic/ultraviolet.png",
            "../pic/car.png",
            "../pic/blood.png",
            "../pic/nice.png",
            "../pic/fish.png",
            "../pic/travel.png"
        ],
        Detailwe: [],
        isItemi: true,
        isFirst: true,
        id: "",
        num: "", //图片的编号
        first: 'first',
        itemi: 'itemi',
        tempMax: [],
        tempMin: [],
        aqi: "",
        O3: "",
        pm25: "",
        pm10: "",
        so2: "",
        warningTitleName: "",
        warningTitle: "",
        warningText: "",
        warningArray: [],
        isWarning: true //动态决定是否显示天气预警
    },
    // 页面在加载成功之前就调用函数，避免用户看到原始的界面
    created() {
        this.searchWeather()
    },
    mounted() {
        // this.functionii()
        //this.Humi()
    },
    methods: {
        changeCity: function(city) {

            this.city = city;
            this.searchWeather();

        },
        searchWeather() {
            var that = this;
            //获取城市id
            axios({
                url: 'https://geoapi.qweather.com/v2/city/lookup',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.city
                }
            }).then(res => {
                that.id = res.data.location[0].id;
                console.log(that.id)
                    //获取城市的信息
                axios({
                    url: 'https://devapi.qweather.com/v7/weather/now',
                    //对get请求的参数拼接
                    params: {
                        key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                        location: that.id
                    }
                }).then(res => {

                    that.NowweatherList = res.data.now;
                    NowweatherList = that.NowweatherList;
                    num = res.data.now.icon; //获取图片的编号
                    this.num = num;
                    this.getWarning();
                    this.getTips();

                }).catch(err => {
                    console.log(err)
                })
            }).catch(err => {
                console.log(err)
            })

        },
        // 获取头部天气图片
        getimgSrc() {
            return "../wepic/" + this.num + ".png"
        },
        // 获取天气预警
        getWarning() {
            var that = this;
            axios({
                url: 'https://devapi.qweather.com/v7/warning/now',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.id,
                }
            }).then(res => {
                console.log("这是天气预警")
                console.log(res);
                console.log(res.data.warning);

                if (res.data.warning.length == 0) {
                    this.isWarning = false;
                } else {
                    this.isWarning = true;
                    this.warningArray = res.data.warning[0];
                    this.warningText = res.data.warning[0].text;
                    this.warningTitleName = res.data.warning[0].typeName;
                    this.warningTitle = res.data.warning[0].title;
                }
            }).catch(err => {
                console.log(err)

            })
        },
        //获取生活指数
        getTips() {
            var that = this;
            axios({
                url: 'https://devapi.qweather.com/v7/indices/1d',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.id,
                    type: "1,2,3,4,5,6"
                }
            }).then(res => {
                console.log(res);
                tips = res.data.daily
                console.log(tips)
                this.tips = tips;
                this.getHours() //获取每小时数据
            }).catch(err => {
                console.log(err)

            })
        },
        //获取每小时天气状况
        getHours() {
            var that = this;

            axios({
                url: 'https://devapi.qweather.com/v7/weather/24h',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.id,

                }
            }).then(res => {
                console.log(res);
                hours = res.data.hourly
                this.hours = hours;
                this.getsvenDay() //获取7天数据
            }).catch(err => {
                console.log(err)

            })
        },
        // 每个小时的天气图片
        getimgSrcHours(x) {
            return x + ".png"
        },
        //每小时天气预报
        gettimehours(m) {
            let x = new Date().getHours();
            let sum = x + m;
            if (sum > 24) {
                sum = sum - 24
            } else {
                sum = sum;
            }
            return sum + ":00";
        },
        //获取7天天气状况
        getsvenDay() {
            var that = this;

            axios({
                url: 'https://devapi.qweather.com/v7/weather/7d',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.id,

                }
            }).then(res => {
                console.log(res);
                this.Detailwe = res.data.daily;
                Detailwe = this.Detailwe;
                console.log(Detailwe)
                    // console.log()
                for (let i = 0; i < Detailwe.length; i++) {
                    this.tempMax.push(Detailwe[i].tempMax);
                    this.tempMin.push(Detailwe[i].tempMin)
                }
                tempMax = this.tempMax;
                tempMin = this.tempMin;
                console.log(this.tempMax)
                console.log(this.tempMin)

                this.getAircon();
                this.functionii();
                this.Humi();

            }).catch(err => {
                console.log(err)

            })
        },
        //获取星期数
        gettimeweek(n) {
            var number = new Date().getDay() //获取到数字
            var day;
            number = (number + n) % 7;
            switch (number) {
                case 0:
                    day = "星期日";
                    break;
                case 1:
                    day = "星期一";
                    break;
                case 2:
                    day = "星期二";
                    break;
                case 3:
                    day = "星期三";
                    break;
                case 4:
                    day = "星期四";
                    break;
                case 5:
                    day = "星期五";
                    break;
                case 6:
                    day = "星期六";
                    break;

            }
            return day;
        },
        // 获取空气质量数据
        getAircon() {
            var that = this;

            axios({
                url: 'https://devapi.qweather.com/v7/air/now',
                //对get请求的参数拼接
                params: {
                    key: '7edc6a09b3e246a6b78d9389d7b8e1b0',
                    location: that.id,
                }
            }).then(res => {
                console.log("空气数据")
                console.log(res);
                this.aqi = res.data.now.aqi;
                this.O3 = res.data.now.o3;
                this.pm25 = res.data.now.pm2p5;
                this.pm10 = res.data.now.pm10;
                this.so2 = res.data.now.so2;
                // console.log(this.aqi);
                this.Aircon();
            }).catch(err => {
                console.log(err)

            })
        },
        // 引用echarts
        functionii() {
            var maxnum = this.tempMax[0];
            var minnum = this.tempMin[0];
            for (let i = 0; i < tempMax.length; i++) {
                if (maxnum < tempMax[i]) {
                    maxnum = tempMax[i];
                }
            }
            for (let j = 0; j < tempMin.length; j++) {
                if (minnum > tempMin[j]) {
                    minnum = tempMin[j];
                }
            }
            var myChart = echarts.init(document.getElementById("wenduChart"));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '22%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    min: minnum,
                    max: maxnum
                },
                series: [{

                        type: 'line',
                        // stack: '总量',
                        // 动态引入最高温度
                        data: this.tempMax,
                        label: {
                            show: true,
                            position: "top",
                            distance: 12,
                            color: "rgba(61, 81, 123)"
                        },
                        lineStyle: {
                            color: "rgba(71, 138, 254)"
                        }
                    },
                    {

                        type: 'line',
                        // stack: '总量',
                        // 动态引入最低温度
                        data: this.tempMin,
                        label: {
                            show: true,
                            position: "bottom",
                            distance: 12,
                            color: "rgba(61, 81, 123)"
                        },
                        lineStyle: {
                            color: "rgba(243, 180, 73)"
                        }
                    }
                ]
            }
            myChart.setOption(option);
            this.tempMax = [];
            this.tempMin = []
        },
        // 湿度
        Humi() {
            console.log(NowweatherList.humidity);
            var humi = (NowweatherList.humidity) / 100;
            console.log(humi)
            var myChart = echarts.init(document.getElementById("humwea"));

            let angle = 0; //角度，用来做简单的动画效果的
            let value = 55.33;
            var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', "#73c0de", '#3ba272', '#fc8452', "#9a60b4", "#ea7ccc"];
            var option = {
                backgroundColor: '#fff',
                grid: {
                    top: '10%',
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                },
                xAxis: [{

                        show: false


                    },
                    {
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
                    },
                    {
                        //name: '单位：件',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        nameGap: '50',
                        data: [],
                    },
                ],
                yAxis: {
                    type: 'value',
                    show: false,
                    max: 100,
                },
                series: [{
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.22,
                                    startAngle: (0 + angle) * Math.PI / 180,
                                    endAngle: (360 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#008DCE",
                                    fill: "transparent",
                                    lineWidth: 4
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5", //紫点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.22;
                            let point = getCirlPoint(x0, y0, r, (225 + angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#008DCE", //绿
                                    fill: "#008DCE"
                                },
                                silent: true
                            };
                        },

                        data: [0]
                    },
                    {
                        type: 'liquidFill',
                        radius: '60%',
                        center: ['50%', '50%'],
                        data: [humi], // data个数代表波浪数
                        color: ['#008DCE'],
                        outline: { // 轮廓设置
                            show: true,
                            borderDistance: 0, // 边框与球中间间距
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: '#008DCE'
                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowColor: 'rgba(22, 22, 22, 0.5)',
                                shadowBlur: 5

                            }
                        },
                        backgroundStyle: {
                            shadowColor: '#008DCE',
                            opacity: .1,
                        },

                        label: {
                            textStyle: {
                                color: '#f3b54b',
                                fontSize: 18
                            }
                        }
                    }
                ],
            };

            //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
            function getCirlPoint(x0, y0, r, angle) {
                let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                return {
                    x: x1,
                    y: y1
                }
            }

            function draw() {
                angle = angle + 3
                myChart.setOption(option, true)
                    //window.requestAnimationFrame(draw);
            }


            myChart.setOption(option);
        },
        // 空气质量
        Aircon() {
            var myChart = echarts.init(document.getElementById("aircondi"));

            var data = [{
                    name: '空气质量',
                    value: this.aqi
                }, {
                    name: 'O3',
                    value: this.O3
                }, {
                    name: 'PM2.5',
                    value: this.pm25
                }, {
                    name: 'PM10',
                    value: this.pm10
                }, {
                    name: 'SO2',
                    value: this.so2
                }]
                // 设一个数组来存等级
            var number = [];
            for (let i = 0; i < data.length; i++) {
                number.push(data[i].value);
            }
            //   设置等级划分
            for (let j = 0; j < number.length; j++) {
                if (number[j] >= 0 && number[j] <= 50) {
                    number[j] = 0;
                } else if (number[j] >= 51 && number[j] <= 100) {
                    number[j] = 1;
                } else if (number[j] >= 101 && number[j] <= 150) {
                    number[j] = 2;
                } else if (number[j] >= 151 && number[j] <= 200) {
                    number[j] = 3;
                } else if (number[j] >= 201 && number[j] <= 300) {
                    number[j] = 4
                } else {
                    number[j] = 5;
                }
            }
            var titleArr = [],
                seriesArr = [];


            colors = [
                ['#95b359', '#dfeaff'],
                ['#d3cf63', '#dfeaff'],
                ['#e0991d', '#dfeaff'],
                ['#d96161', '#dfeaff'],
                ['#a257d0', '#dfeaff'],
                ['#d94371', '#dfeaff']
            ]

            data.forEach(function(item, index) {
                titleArr.push({
                    text: item.name,
                    left: index * 20 + 10 + '%',
                    top: '75%',
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: '16',
                        color: colors[number[index]][0],
                        textAlign: 'center',
                    },
                });

                seriesArr.push({
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [50, 60],
                    itemStyle: {
                        normal: {
                            color: colors[number[index]][0],
                            shadowColor: colors[number[index]][1],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        }
                    },
                    hoverAnimation: false,
                    center: [index * 20 + 10 + '%', '50%'],

                    data: [{
                        value: item.value,
                        label: {
                            normal: {
                                formatter: function(params) {
                                    return params.value;
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: colors[number[index]][0]
                                }
                            }
                        },
                    }, {
                        value: 350 - item.value,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: colors[number[index]][1]
                            },
                            emphasis: {
                                color: colors[number[index]][1]
                            }
                        }
                    }]
                })
            });


            var option = {
                backgroundColor: "#fff",
                gird: {
                    show: true,
                    top: "24%",
                    height: "50%",
                    width: "66%"
                },
                title: titleArr,
                series: seriesArr
            }
            myChart.setOption(option);
        }
    },
})

window.onload = function() {
    var btnpreid = document.getElementById("btn-preid");
    var btnnextid = document.getElementById("btn-nextid");
    var List = document.getElementsByClassName("time_list");
    var inp = document.getElementById("inp");
    var hotkey = document.getElementById("hotcity");
    var acity = document.getElementById("acity");
    var input_sub = document.getElementsByClassName("input_sub");
    var week = document.getElementById("week");
    var liseven = document.getElementById("li_seven")
        //获取焦点之后显示文本框
    inp.addEventListener("focus", myFunction);

    function myFunction() {
        hotkey.style.display = "block";
    }
    //设置一个定时器 失去焦点
    inp.onblur = function() {
            setTimeout(function() { hotkey.style.display = "none"; }, 200)
        }
        //点击搜索的时候，消失
    input_sub.onclick = function() {
            hotkey.style.display = "none";
        }
        //按钮消失
    inp.onkeyup = function() {
            hotkey.style.display = "none";
        }
        // 实现箭头的悬浮效果
    btnpreid.onmouseover = function() {
        btnpreid.src = "../pic/pre_b.png"
    }
    btnpreid.onmouseout = function() {
        btnpreid.src = "../pic/pre_a.png"
    }
    btnnextid.onmouseover = function() {
        btnnextid.src = "../pic/next_b.png"
    }
    btnnextid.onmouseout = function() {
            btnnextid.src = "../pic/next_a.png"
        }
        //实现天气的切换
    btnnextid.onclick = function() {

        // console.log(List.length);
        for (var i = 0; i < List.length; i++) {
            List[i].style.marginLeft = "-1100px";
            List[i].style.transition = "2s"
        }
    }
    btnpreid.onclick = function() {

        // console.log(List.length);
        for (var i = 0; i < List.length; i++) {
            List[i].style.marginLeft = "0px";
        }
    }


}